<template>
  <div class="set-container c21">
    <div class="set-box">
      <h4>修改密码</h4>
      <div class="mt30">
        <p class="rel">
          原密码<el-input
            placeholder="请输入旧密码"
            v-model="oldPwd"
            show-password
            @blur="old"
          ></el-input>
          <span class="msg" v-show="show">旧密码错误!请重新输入!</span>
        </p>
        <p>
          新密码
          <el-input
            placeholder="请输入新密码"
            v-model="newPwd"
            show-password
          ></el-input>
        </p>

        <p>
          确认新密码
          <el-input
            placeholder="确认新密码"
            v-model="confirmPwd"
            show-password
          ></el-input>
        </p>

        <p class="tac">
          <el-button
            style="background-color: #666699"
            class="fff"
            @click="ok"
            :disabled="btn"
            >确定</el-button
          >
          <el-button class="ml15 fff" type="danger">重置</el-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { oldpwd, change } from "@/apis/users";
export default {
  data() {
    return {
      oldPwd: "",
      newPwd: "",
      confirmPwd: "",
      id: 1234,
      num: "安东尼",
      type: "超级管理员",
      time: "2017-05-18",
      img: "https://img0.baidu.com/it/u=1950977217,4151841346&fm=26&fmt=auto&gp=0.jpg",
      status: false,
      show: false,
      btn: true,
      uid: 0,
    };
  },
  methods: {
    old() {
      this.uid = JSON.parse(localStorage.getItem("userID"));
      oldpwd({ oldPwd: this.oldPwd, id: this.uid }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.btn = false;
        } else {
          this.show = true;
        }
      });
    },
    ok() {
      change({ newPwd: this.newPwd, id: this.uid }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "系统提示:修改密码成功!",
            type: "success",
          });
        } else {
          this.$message.error("修改密码失败,请重新操作!");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.set-container {
  box-shadow: 0 0 15px 1px #ccc;
  padding-bottom: 40px;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  .set-box,
  .save-box {
    h4 {
      line-height: 75px;
      padding: 0 20px;
      border-bottom: 1px solid #ccc;
    }
    div {
      width: 450px;
      text-align: right;
      p {
        .el-input {
          margin: 0 0 30px 15px;
          width: 300px;
        }
        .msg {
          font-size: 12px;
          color: #ff9999;
          position: absolute;
          left: 150px;
          bottom: 10px;
        }
      }
    }
  }
}
</style>